<template>
  <n-input-number
    :value="modelValue"
    :size="option?.size"
    :placeholder="option?.placeholder"
    :disabled="option?.disabled"
    :autofocus="option?.autofocus"
    :clearable="option?.clearable"
    :readonly="option?.readonly"
    :show-button="option?.showButton"
    :button-placement="option?.buttonPlacement"
    :min="option?.min"
    :max="option?.max"
    :step="option?.step"
    :precision="option?.precision"
    :controls="option?.controls"
    :keyboard="option?.keyboard"
    :format="option?.format"
    @blur="option?.onBlur"
    @focus="option?.onFocus"
    @clear="option?.onClear"
    @update:value="(v) => (option?.onUpdate?.(v), $emit('update:modelValue', v))">
    <template #prefix><component :is="option?.renderPrefix" /></template>
    <template #suffix><component :is="option?.renderSuffix" /></template>
  </n-input-number>
</template>

<script lang="ts" setup>
import { NInputNumber } from "naive-ui";
import type { NumberOption } from "../form-item-types";

defineProps<{ modelValue: any; option?: NumberOption }>();
</script>
